BabylonJS-এ Collision Detection এবং Collision Response ব্যবহৃত হয় 3D অবজেক্টের মধ্যে সংঘর্ষ (collision) চিহ্নিত এবং সেগুলির প্রতিক্রিয়া (response) তৈরি করার জন্য। যখন দুটি 3D অবজেক্ট একে অপরকে স্পর্শ করে বা ধাক্কা দেয়, তখন Collision Detection ব্যবহৃত হয় তাদের সংঘর্ষ সনাক্ত করতে এবং Collision Response ব্যবহৃত হয় তাদের আচরণ নিয়ন্ত্রণ করতে।
এছাড়াও, Interaction বা ইন্টারঅ্যাকশন হল ব্যবহারকারীর অ্যাকশন (যেমন ক্লিক বা পয়েন্টিং) এর প্রতিক্রিয়া, যা আমরা Collision Detection-এর মাধ্যমে সঠিকভাবে পরিচালনা করতে পারি। এই গাইডে Collision এবং Interaction ব্যবস্থাপনা দেখানো হবে।
১. Collision Detection
Collision Detection হল সেই প্রক্রিয়া যেখানে আমরা পরীক্ষা করি দুটি 3D অবজেক্ট একে অপরকে স্পর্শ করছে কিনা। BabylonJS-এ collisionMask এবং checkCollisions পদ্ধতি ব্যবহার করে আমরা এই কাজটি করতে পারি।
উদাহরণ:
// 3D দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);
// দুটি বক্স তৈরি করা
var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 2}, scene);
// বক্স 1 কে কিছুটা সরানো
box1.position.x = 3;
// বক্স 2 কে কিছুটা সরানো
box2.position.x = 0;
// Collision Detection সক্রিয় করা
box1.checkCollisions = true;
box2.checkCollisions = true;
// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস তৈরি করা
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// Collision Response সক্ষম করা
scene.registerBeforeRender(function() {
if (box1.intersectsMesh(box2, false)) {
console.log("Collision detected!");
}
});
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
এখানে:
checkCollisionsপ্যারামিটারকেtrueকরা হয়েছে, যাতে বক্সগুলি সংঘর্ষ সনাক্ত করতে পারে।intersectsMesh()পদ্ধতি ব্যবহার করা হয়েছে, যা পরীক্ষণ করে দুটি অবজেক্ট একে অপরকে স্পর্শ করছে কিনা।
২. Collision Response
Collision Response হল সংঘর্ষের পর অবজেক্টের প্রতিক্রিয়া কেমন হবে তা নিয়ন্ত্রণ করা। যখন দুটি অবজেক্ট সংঘর্ষে আসবে, তখন BabylonJS স্বয়ংক্রিয়ভাবে তাদের Position এবং Velocity আপডেট করতে পারে।
উদাহরণ: বক্সের সাথে সংঘর্ষের পরে প্রতিক্রিয়া
var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 2}, scene);
box1.position.x = 3;
box2.position.x = 0;
// physics engine চালু করা
var physicsEngine = scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.CannonJSPlugin());
// physics system যুক্ত করা
box1.physicsImpostor = new BABYLON.PhysicsImpostor(box1, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);
box2.physicsImpostor = new BABYLON.PhysicsImpostor(box2, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);
// বক্স 1 কে গতি দেওয়া
box1.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(-5, 0, 0));
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
এখানে:
physicsImpostorব্যবহার করে Physics Engine চালু করা হয়েছে, যার মাধ্যমে অবজেক্টের মধ্যে সংঘর্ষ এবং প্রতিক্রিয়া সঠিকভাবে হ্যান্ডল করা হয়।setLinearVelocityব্যবহার করে একটি বক্সকে গতিশীল করা হয়েছে, যাতে এটি অন্য বক্সটির সঙ্গে সংঘর্ষে আসবে।
৩. Interaction এবং Event Handling
ব্যবহারকারীর ইনপুট (যেমন ক্লিক, পয়েন্টিং বা ড্র্যাগ) গ্রহণ করার জন্য BabylonJS GUI ব্যবহার করা যায়। এটি ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন এবং Collision Response কন্ট্রোল করতে সাহায্য করে।
উদাহরণ: মাউস ক্লিক দিয়ে Collision Detection
var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
box1.position.x = 0;
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// মাউস ক্লিক ইভেন্টে বক্সের সাথে সংঘর্ষ পরীক্ষা
scene.onPointerDown = function (evt, pickResult) {
if (pickResult.hit && pickResult.pickedMesh === box1) {
console.log("Clicked on the box!");
}
};
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
এখানে:
scene.onPointerDownইভেন্ট ব্যবহার করা হয়েছে, যা ব্যবহারকারী যখন বক্সে ক্লিক করবেন, তখন সাড়া দিবে।
৪. গ্রাভিটি এবং রিগিড বডি
BabylonJS-এ গ্রাভিটি এবং রিগিড বডি ইমপোস্টরের মাধ্যমে আমরা 3D অবজেক্টের বাস্তবসম্মত আচার-আচরণ তৈরি করতে পারি, যা সংঘর্ষ এবং প্রতিক্রিয়ায় আরও সঠিক আচরণ সৃষ্টি করে।
উদাহরণ: গ্রাভিটি ব্যবহার করে ফিজিক্স সিমুলেশন
// Physics সিস্টেম সক্রিয় করা
scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.CannonJSPlugin());
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 10;
// বক্সে ফিজিক্স ইমপোস্টর যোগ করা
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
এখানে:
- গ্রাভিটি সক্রিয় করা হয়েছে, যার ফলে বক্সটি নিচের দিকে পড়বে।
সারাংশ
BabylonJS-এ Collision Detection এবং Collision Response বাস্তবসম্মত এবং ইন্টারঅ্যাকটিভ 3D অভিজ্ঞতা তৈরি করার জন্য গুরুত্বপূর্ণ ভূমিকা পালন করে। Physics Engine ব্যবহারের মাধ্যমে, আপনি অবজেক্টের গতি, অবস্থান এবং অন্যান্য বৈশিষ্ট্যগুলো সংঘর্ষের সময় সঠিকভাবে নিয়ন্ত্রণ করতে পারবেন। এর মাধ্যমে ব্যবহারকারীদের সঙ্গে ইনপুট ইন্টারঅ্যাকশন এবং অবজেক্টের মধ্যে সংঘর্ষ এবং তাদের প্রতিক্রিয়া বাস্তবসম্মতভাবে হ্যান্ডল করা যায়।
Read more
